<template>
  <div class="app-container">
    <!-- 商品信息 -->
    <template v-if="!loading">
      <p class="pageTitle">{{ pageType }} Product</p>
      <el-form
        ref="productForm"
        :model="formData"
        :rules="rules"
        :hide-required-asterisk="true"
        label-position="top"
        style="margin-bottom: 45px"
      >
        <!-- 选择店铺 -->
        <div class="myCard">
          <el-form-item class="storeItem" label="Choose Store" position="left">
            <el-select
              v-model="storeId"
              placeholder="Choose Store"
              :disabled="
                productId !== undefined &&
                  $route.params.storeId !== undefined &&
                  Number($route.params.storeId) !== 0
              "
              @change="chosedStore"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
              <template slot="empty">
                <div class="noDataTip">
                  There are no shops yet.&nbsp;<el-button type="text" @click="$router.push('/store/shopify')">Add</el-button>
                </div>
              </template>
            </el-select>
          </el-form-item>
        </div>
        <div class="productInfo">
          <div class="infoRight">
            <div class="myCard">
              <el-form-item prop="name" label="Title">
                <el-input v-model="formData.name" placeholder="Product title" />
              </el-form-item>
              <el-form-item id="Description" label="Description">
                <UE :id="ue" ref="ue" :default-msg="content.description" />
              </el-form-item>
            </div>
            <div id="Images" class="myCard">
              <el-form-item label="Images">
                <img
                  v-for="(item, index) in images"
                  :key="index"
                  :src="
                    item.uri.indexOf('http') === 0
                      ? item.uri
                      : imgPrefix + item.uri + imgSuffix
                  "
                  class="productImg"
                  :style="
                    index === 0
                      ? 'width:100px;height:100px;margin-right: 10px;'
                      : 'margin-right: 10px;'
                  "
                  @click="
                    toProview(
                      item.uri.indexOf('http') === 0
                        ? item.uri
                        : imgPrefix + item.uri
                    )
                  "
                >
                <el-button
                  :style="{
                    position: 'relative',
                    top: images.length > 0 ? '-20px' : '0'
                  }"
                  @click="thumbnailShow = true"
                >{{ images.length >= 5 ? 'Edit' : 'Add/Select' }}</el-button>
              </el-form-item>
            </div>
            <!-- 单一 -->
            <template v-if="!(pageType === 'Edit' && formData.type === 1)">
              <div class="myCard">
                <p class="myCardTitle">Pricing</p>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="salePrice" label="Sale Price">
                      <el-input v-model="formData.salePrice" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="regularPrice" label="Regular Price">
                      <el-input v-model="formData.regularPrice" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="Charge tax">
                  <el-row>
                    <el-col :span="4">
                      <el-checkbox
                        v-model="formData.taxStatus"
                        :true-label="1"
                        :false-label="0"
                      >Charge tax</el-checkbox>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
              <div class="myCard">
                <p class="myCardTitle">Inventory</p>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="sku" label="SKU">
                      <el-input
                        v-model="formData.sku"
                        placeholder="SKU"
                        @input="changeVariantSku"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="barcode" label="Barcode">
                      <el-input
                        v-model="formData.barcode"
                        placeholder="Bar code"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col class="flexCol" :span="12">
                    <el-checkbox
                      v-model="formData.isManageInventory"
                      :true-label="1"
                      :false-label="0"
                      @change="(val) => toggleCheck(val, 'isManageInventory')"
                    >Track quantity</el-checkbox>
                    <el-form-item
                      v-if="formData.isManageInventory"
                      prop="inventoryQuantity"
                    >
                      <el-input
                        v-model.number="formData.inventoryQuantity"
                        placeholder="Inventory quantity"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col class="flexCol" :span="12">
                    <template v-if="formData.isManageInventory">
                      <el-checkbox
                        v-model="formData.allowBackorders"
                        :true-label="1"
                        :false-label="0"
                      >Continue selling when out of stock</el-checkbox>
                    </template>
                  </el-col>
                </el-row>
              </div>
              <div class="myCard">
                <p class="myCardTitle">Shipping</p>
                <el-form-item style="margin-bottom:5px;">
                  <el-checkbox
                    v-model="formData.isVirtual"
                    :true-label="1"
                    :false-label="0"
                    @change="(val) => toggleCheck(val, 'isVirtual')"
                  >is Virtual</el-checkbox>
                </el-form-item>
                <el-row v-if="formData.isVirtual === 0" :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="weight" label="Weight">
                      <el-input
                        v-model="formData.weight"
                        placeholder="Weight"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
            <!-- 变体 -->
            <div class="myCard">
              <p class="myCardTitle flex">
                <span>Variants</span>
                <el-button
                  type="text"
                  @click="viewVariant = true"
                >view all</el-button>
              </p>
              <el-radio-group
                v-model="formData.type"
                :disabled="pageType === 'Edit'"
              >
                <el-radio :label="0">Simple product</el-radio>
                <el-radio :label="1">Variants</el-radio>
              </el-radio-group>
              <div
                v-if="formData.type === 1"
                style="margin-top: 15px;padding-top:15px;border-top: 1px solid #ddd; width: 100%;"
              >
                <!-- 规格信息 -->
                <el-row :gutter="20">
                  <div
                    v-for="(item, index) in specifications"
                    :key="index"
                    class="specificationItem"
                  >
                    <el-col :span="6">
                      <el-form-item label="" label-width="100px">
                        <el-select
                          v-model="item.parent"
                          placeholder="Please select"
                          @visible-change="resetVariantList"
                          @change="variantNameChange(index)"
                        >
                          <el-option
                            v-for="i in specList"
                            :key="i.id"
                            :label="i.name"
                            :value="i.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item label="" label-width="10px">
                        <el-select
                          v-model="item.son"
                          multiple
                          filterable
                          default-first-option
                          :placeholder="`select ${item.parent} values`"
                          style="width:100%;"
                        >
                          <el-option
                            v-for="i in selectOptions[index]"
                            :key="i.name"
                            :label="i.name"
                            :value="i.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item label="" label-width="10px">
                        <el-button
                          type="text"
                          @click="removeItem(index)"
                        >remove</el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <el-col :span="6">
                    <el-form-item label="" label-width="100px">
                      <el-button
                        v-if="specifications.length < 3"
                        plain
                        @click="addSpecificationItem()"
                      >Add variants</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 变种信息 -->
                <el-table
                  ref="multipleTable"
                  class="specTable"
                  :data="formData.specificationData"
                >
                  <el-table-column prop="thumbnailUri" label="Image" width="70">
                    <template slot-scope="scope">
                      <el-image
                        v-if="scope.row.thumbnailUri"
                        :src="
                          scope.row.thumbnailUri.indexOf('http') === 0
                            ? scope.row.thumbnailUri
                            : imgPrefix + scope.row.thumbnailUri + imgSuffix
                        "
                        class="show-img"
                        style="width:50px;height:50px;"
                        @click="
                          showVariantDialog(scope.$index, scope.row.imageId)
                        "
                      />
                      <i
                        v-else
                        class="el-icon-plus uploader-icon"
                        @click="showVariantDialog(scope.$index, null)"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="salePrice"
                    label="Sale Price($)"
                    width="120"
                  >
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <i class="el-icon-edit" @click="setPrice('salePrice')" />
                    </template>
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="
                          'specificationData.' + scope.$index + '.salePrice'
                        "
                        :rules="formData.rules.salePrice"
                      >
                        <el-input v-model="scope.row.salePrice" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="regularPrice"
                    label="Regular Pricee($)"
                    width="140"
                  >
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <i
                        class="el-icon-edit"
                        @click="setPrice('regularPrice')"
                      />
                    </template>
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="
                          'specificationData.' + scope.$index + '.regularPrice'
                        "
                        :rules="formData.rules.regularPrice"
                      >
                        <el-input v-model="scope.row.regularPrice" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="Is charge tax" width="120">
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <el-checkbox
                        :true-label="1"
                        :false-label="0"
                        @change="
                          (checked) => batchCheckChange(checked, 'taxStatus')
                        "
                      />
                    </template>
                    <template slot-scope="scope">
                      <el-checkbox
                        v-model="scope.row.taxStatus"
                        :true-label="1"
                        :false-label="0"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="Is Virtual" width="90">
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <el-checkbox
                        :true-label="1"
                        :false-label="0"
                        @change="
                          (checked) => batchCheckChange(checked, 'isVirtual')
                        "
                      />
                    </template>
                    <template slot-scope="scope">
                      <el-checkbox
                        v-model="scope.row.isVirtual"
                        :true-label="1"
                        :false-label="0"
                        @change="
                          (val) =>
                            specToggleCheck(val, 'isVirtual', scope.$index)
                        "
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="weight(kg)" width="100">
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <i class="el-icon-edit" @click="setPrice('weight')" />
                    </template>
                    <template
                      v-if="scope.row.isVirtual === 0"
                      slot-scope="scope"
                    >
                      <el-form-item
                        :prop="'specificationData.' + scope.$index + '.weight'"
                        :rules="formData.rules.weight"
                      >
                        <el-input v-model="scope.row.weight" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="Stock" width="70">
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <el-checkbox
                        :true-label="1"
                        :false-label="0"
                        @change="
                          (checked) => batchCheckChange(checked, 'isManage')
                        "
                      />
                    </template>
                    <template slot-scope="scope">
                      <el-checkbox
                        v-model="scope.row.isManage"
                        :true-label="1"
                        :false-label="0"
                        @change="
                          (val) =>
                            specToggleCheck(val, 'isManage', scope.$index)
                        "
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="Quantity" width="100">
                    <template slot="header" slot-scope="{ column }">
                      <span>{{ column.label }}</span>
                      <i class="el-icon-edit" @click="setPrice('quantity')" />
                    </template>
                    <template v-if="scope.row.isManage" slot-scope="scope">
                      <el-form-item
                        :prop="
                          'specificationData.' + scope.$index + '.quantity'
                        "
                        :rules="formData.rules.quantity"
                      >
                        <el-input v-model.number="scope.row.quantity" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="variantSku"
                    label="variantSku"
                    width="140"
                  />
                  <el-table-column prop="barcode" label="Bar Code">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'specificationData.' + scope.$index + '.barcode'"
                        :rules="formData.rules.barcode"
                      >
                        <el-input v-model="scope.row.barcode" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column width="30">
                    <template slot-scope="scope">
                      <i class="el-icon-delete" @click="deleteSkuItem(scope)" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="myCard">
              <p class="myCardTitle">SEO</p>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="Title">
                    <el-input v-model="content.seoTitle" placeholder="Title" />
                  </el-form-item>
                  <el-form-item label="URL">
                    <el-input v-model="content.seoUrl" placeholder="URL" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="Description">
                    <el-input
                      v-model="content.seoDescription"
                      type="textarea"
                      :rows="6"
                      placeholder="Description"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="infoLeft">
            <div class="myCard">
              <p class="myCardTitle">Online Store</p>
              <el-form-item label="Publish product on">
                <el-date-picker
                  v-model="formData.publishTime"
                  popper-class="productDetPicker"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="Select date time"
                  :picker-options="timeChange"
                />
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="productCategoryIds">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Category</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'category')"
                  >view all</el-button>
                </div>
                <el-select
                  v-model="formData.productCategoryIds"
                  filterable
                  allow-create
                  placeholder="select/add category"
                  @change="categoryChange"
                  @visible-change="productCategoryList"
                >
                  <el-option
                    v-for="item in categoryOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="productTagIds">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Tags</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'tag')"
                  >view all</el-button>
                </div>
                <el-select
                  v-model="formData.productTagIds"
                  filterable
                  multiple
                  allow-create
                  placeholder="select/add tags"
                  @change="productTagAdd"
                  @visible-change="productTagList"
                >
                  <el-option
                    v-for="item in tagOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="vendorId">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Vendor</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'vendor')"
                  >view all</el-button>
                </div>
                <el-select
                  v-model="formData.vendorId"
                  filterable
                  allow-create
                  placeholder="select/add vendor"
                  @change="vendorAdd"
                  @visible-change="vendorList"
                >
                  <el-option
                    v-for="item in vendorOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </template>

    <!-- 数据请求时显示loading -->
    <div
      v-else
      v-loading="loading"
      element-loading-text="loading..."
      style="height: 120px;"
    />

    <div :class="[{ open: $store.state.app.sidebar.opened }, 'bottomBtns']">
      <div class="right">
        <el-button
          v-preventReClick
          type="primary"
          :disabled="loading || !storeId"
          @click="submitData"
        >Save</el-button>
        <el-button @click="goBack()">Back</el-button>
      </div>
    </div>

    <!-- 缩略图弹窗 -->
    <thumbnail-dialog
      v-if="thumbnailShow"
      :id="storeId"
      :images="images"
      @choseThumbnail="choseThumbnail"
    />

    <!-- 变种图片上传 -->
    <upload-variant
      v-if="variantDialogVisible"
      :store-id="storeId"
      :images="images"
      :selected-id="selectedId"
      @setVariantImg="setVariantImg"
      @emitClose="variantDialogVisible = false"
    />

    <!-- 查看全部标签 -->
    <all-tag
      v-if="viewTags"
      :selected-id="formData['productTagIds']"
      :store-id="storeId"
      :view-tags="viewTags"
      @closeTagsDialog="viewTags = false"
      @getSelectedTag="getSelectedTag"
      @setTagList="
        (data) => {
          tagOptions = data;
        }
      "
    />

    <!-- 查看全部分类 -->
    <single-category
      v-if="viewCategory"
      :selected-id="formData['productCategoryIds']"
      :store-id="storeId"
      :view-category="viewCategory"
      @closeCategoryDialog="closeCategoryDialog"
      @getSelectedCategory="getSelectedCategory"
      @setCategoryList="
        (data) => {
          categoryOptions = data;
        }
      "
    />

    <!-- 查看全部供应商 -->
    <all-vendor
      v-if="viewVendor"
      :store-id="storeId"
      :selected-id="formData['vendorId']"
      :view-vendor="viewVendor"
      @closeVendorDialog="closeVendorDialog"
      @getSelectedVendor="getSelectedVendor"
      @setVendorList="
        (data) => {
          vendorOptions = data;
        }
      "
    />

    <!-- 查看全部规格 -->
    <all-variant
      v-if="viewVariant"
      :store-id="storeId"
      :view-vendor="viewVariant"
      @closeVariantDialog="viewVariant = false"
    />

    <!-- 批量修改弹窗 -->
    <batch-modify
      v-if="batchVisible"
      :label="writeLabel"
      @closeBatch="closeBatch"
    />

    <!-- 图片预览 -->
    <proview-img v-if="proviewUrl" :src="proviewUrl" @close="closeProview" />
  </div>
</template>

<script src="../pageScript/shopifyDet"></script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.app-container {
  background-color: #fbfbfb;
}
.pageTitle {
  font-size: 22px;
  padding: 10px 0 20px;
}
.noDataTip {
  font-size: 12px;
  text-align: center;
  color: #848484;
}
.myCard {
  box-shadow: 0 0 0 1px #ddd;
  padding: 15px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 6px;
  width: 100%;
  .myCardTitle {
    font-weight: 600;
    padding-bottom: 15px;
    &.flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    > span {
      font-weight: 600;
    }
  }
  ::v-deep label {
    font-weight: 500;
  }
  .storeItem {
    margin-bottom: 0;
    ::v-deep .el-form-item__label {
      padding-bottom: 0;
      width: 120px;
    }
    ::v-deep .el-form-item__content {
      display: inline-block;
    }
  }
  .flexCol {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 32px;
    margin-bottom: 18px;
    > .el-form-item {
      margin-bottom: 0;
      margin-left: 20px;
    }
  }
  ::v-deep .el-tag {
    height: auto;
    white-space: inherit;
  }
}
.productInfo {
  display: flex;
  ::v-deep .el-form-item__label {
    padding-bottom: 5px;
    width: 100%;
    .customLabel {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .infoRight {
    flex: 4;
    width: 0;
    margin-right: 20px;
    ::v-deep #editor {
      line-height: normal;
    }
    .specTable {
      ::v-deep .el-table__body-wrapper {
        overflow: unset;
      }
      ::v-deep .cell {
        overflow: unset;
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
  }
  .infoLeft {
    flex: 1;
    // min-width: 240px;
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
}

.bottomBtns {
  position: fixed;
  bottom: 0px;
  right: 0px;
  box-sizing: border-box;
  width: calc(100% - 54px);
  background: #fff;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
  transition: width 0.28s;
  z-index: 145;
  &.open {
    width: calc(100% - #{$sideBarWidth});
  }
  .right {
    text-align: right;
  }
}
.uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px dotted #ddd;
  cursor: pointer;
}
</style>
